<ion-header>

  <ion-toolbar>
    <ion-title>Datetime</ion-title>
  </ion-toolbar>

</ion-header>


<ion-content class="outer-content">

  <ion-item>
    <ion-label>YYYY</ion-label>
    <ion-datetime displayFormat="YYYY" min="1981" max="2002" [(ngModel)]="wwwInvented"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>MMMM YY</ion-label>
    <ion-datetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" [(ngModel)]="netscapeReleased"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>MM/DD/YYYY</ion-label>
    <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" [(ngModel)]="firefoxReleased" class="e2eOpenMMDDYYYY"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
    <ion-datetime [(ngModel)]="operaReleased" min="1990-02" max="2000"
      displayFormat="DDD. MMM DD, YY"
      monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"
      [dayShortNames]="customShortDay"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>D MMM YYYY H:mm</ion-label>
    <ion-datetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" [(ngModel)]="webkitOpenSourced"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>DDDD MMM D, YYYY</ion-label>
    <ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" [(ngModel)]="chromeReleased"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>HH:mm</ion-label>
    <ion-datetime displayFormat="HH:mm" [(ngModel)]="time"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>h:mm a</ion-label>
    <ion-datetime (ionChange)="onChange($event)" (ionCancel)="onCancel($event)" displayFormat="h:mm a" [(ngModel)]="time"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>hh:mm A (15 min steps)</ion-label>
    <ion-datetime displayFormat="h:mm A" minuteValues="0,15,30,45"></ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label>Leap years, summer months</ion-label>
    <ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" [yearValues]="leapYearsArray" monthValues="6,7,8" [(ngModel)]="leapYearsSummerMonths"></ion-datetime>
  </ion-item>

  <p aria-hidden="true" padding>
    <code>wwwInvented: {{wwwInvented}}</code><br>
    <code>netscapeReleased: {{netscapeReleased}}</code><br>
    <code>operaReleased: {{operaReleased}}</code><br>
    <code>firefoxReleased: {{firefoxReleased}}</code><br>
    <code>webkitOpenSourced: {{webkitOpenSourced}}</code><br>
    <code>chromeReleased: {{chromeReleased}}</code><br>
    <code>time: {{time}}</code><br>
    <code>Leap year, summer months: {{leapYearsSummerMonths}}</code><br>
  </p>

  <p>
    <button ion-button (click)="clearLeapYear()">Clear Leap Years</button>
  </p>

  <ion-item>
    <ion-label>myDate: {{myDate}}</ion-label>
    <ion-datetime displayFormat="MMM DD, YYYY HH:mm" [(ngModel)]="myDate"></ion-datetime>
  </ion-item>

  <p>
    <button ion-button (click)="convertDate()">Convert myDate To Date</button>
    {{convertedDate}}
  </p>

  <ion-item>
    <ion-label>HH:mm:ss</ion-label>
    <ion-datetime displayFormat="HH:mm:ss" [(ngModel)]="time"></ion-datetime>
  </ion-item>

</ion-content>
